<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="$router.back()" />
    <!-- /导航栏 -->

    <input type="file" hidden ref="avatarFiles" @change="getFile" />
    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center @click="$refs.avatarFiles.click()">
      <van-image class="avatar" round fit="cover" :src="myInfo.photo" />
    </van-cell>
    <van-cell title="昵称" :value="myInfo.name" is-link @click="nameShow = true" />
    <van-cell
      title="性别"
      :value="myInfo.gender ? '女' : '男'"
      is-link
      @click="genderShow = true"
    />
    <van-cell title="生日" :value="myInfo.birthday" is-link @click="birthShow = true" />
    <!-- /个人信息 -->

    <!-- 昵称编辑的弹出层 -->
    <van-popup v-model="nameShow" position="bottom" class="namePop">
      <!-- 新技巧,可以在自己的组件中加入v-model -->
      <name-pop
        @quit="nameShow = false"
        v-if="nameShow"
        v-model="myInfo.name"
        @finish="editName"
      ></name-pop>
    </van-popup>

    <van-popup v-model="genderShow" position="bottom">
      <gender-pop
        :gender="myInfo.gender"
        @close="genderShow = false"
        @editOk="editGender"
        v-if="genderShow"
      ></gender-pop>
    </van-popup>

    <!-- 生日编辑弹出层 -->
    <van-popup v-model="birthShow" position="bottom">
      <birth-pop
        v-if="birthShow"
        @close="birthShow = false"
        :defaultdate="myInfo.birthday"
        @editOk="editBirth"
      ></birth-pop>
    </van-popup>

    <!-- 编辑头像弹出层 -->
    <van-popup v-model="avatarShow" position="bottom" style="height: 100%">
      <avatar-pop
        :src="blob"
        @close="avatarShow = false"
        @finish="onFinish"
        v-if="avatarShow"
      ></avatar-pop>
    </van-popup>
  </div>
</template>

<script>
// 获取用户个人资料api
import { getuser } from '@/assets/api/user'
// 编辑昵称的弹窗组件
import namePop from './components/namPop.vue'
// 编辑性别的弹窗组件
import genderPop from './components/genderPop.vue'
// 编辑生日的弹窗组件
import birthPop from './components/birthPop.vue'
// 编辑头像的弹窗组件
import avatarPop from './components/avatarPop.vue'

export default {
  name: 'UserProfile',
  components: {
    namePop,
    genderPop,
    birthPop,
    avatarPop
  },
  props: {},
  data() {
    return {
      // 用户个人的信息
      myInfo: {},
      // 姓名编辑弹出层
      nameShow: false,
      // 性别编辑弹出层
      genderShow: false,
      // 生日编辑弹出层
      birthShow: false,
      // 编辑头像弹出层
      avatarShow: false,
      // 头像blob属性
      blob: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        // 发起axios请求
        var { data: res } = await getuser()
      } catch {
        // 处理理请求错误
        return this.$toast('获取个人信息失败，确认登入')
      }
      // 将数据本地保存
      this.myInfo = res.data
    },
    // 编辑名字
    editName(val) {
      this.myInfo.name = val
      this.nameShow = false
    },
    // 编辑性别
    editGender(val) {
      this.myInfo.gender = val
      this.genderShow = false
    },
    // 编辑生日
    editBirth(val) {
      this.myInfo.birthday = val
      this.birthShow = false
    },
    // 获得头像文件
    getFile() {
      // 获取文件对象
      const file = this.$refs.avatarFiles.files[0]
      // 基于文件对象，获取blob属性
      this.blob = URL.createObjectURL(file)
      // 显示弹出层
      this.avatarShow = true
      // 清空value值,在选择相同的文件依旧触发change事件
      this.$refs.avatarFiles.value = ''
    },
    // 更改头像
    onFinish(val) {
      this.myInfo.photo = val
      this.avatarShow = false
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
  .namePop {
    height: 100%;
  }
}
</style>
